<%@ page import="java.util.List" %>
<%@ page import="java.util.ArrayList" %>
<%@ page import="org.example.javabean.Book" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" pageEncoding="UTF-8" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Layui</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="./layui/css/layui.css"
          media="all">
    <!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
    <style>
        .wrap-div {
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 3;
            overflow: hidden;
            float: left;
            width: 100%;
            word-break: break-all;
            text-overflow: ellipsis;
        }
    </style>
</head>
<body>
<%@include file="window.jsp" %>

<div class="layui-nav-item demoTable"
     style="display: flex;justify-content: flex-end;">
    <input type="text" class="layui-input"
           style="padding: 0;display: inline;width: 300px;"
           placeholder="请输入搜索信息..."/>
    <button class="layui-btn" data-type="getCheckLength"
            style="margin-left: 20px;">搜索
    </button>
</div>

<div class="layui-form" id="content" >
    <table class="layui-table" style="table-layout:fixed" id="table1" align="center">
        <colgroup>
            <col width="100">
            <col width="550">
            <col width="200">
        </colgroup>
        <thead>
        <tr>
            <th>用户</th>
            <th>留言</th>
            <th>发表时间</th>


        </tr>
        </thead>
        <tbody>
        <c:forEach var="message"  items="${sessionScope.messages}"
                   varStatus="status">

            <tr>
                <td id="bookid">${message.username}</td>
                <td>${message.message}</td>
                <td>${message.date}</td>

            </tr>
        </c:forEach>
        </tbody>
    </table>
</div>

<div id="page" style="display: flex;justify-content: center;"></div>

<script src="./layui/layui.js" charset="utf-8"></script>
<!-- 注意：如果你直接复制所有代码到本地，上述 JS 路径需要改成你本地的 -->
<script>
    layui.use(['laypage', 'layer', 'element'], function () {
            var laypage = layui.laypage
                , layer = layui.layer, element =
                layui.element;
            var $ = layui.$;
            var count = 0, page = 1, limit = 5;


            //借阅按钮的点击事件
            $(document).on('click', '#borrow', function () {
                //可以获取第一列的内容，也就是name的值
                var status= $(this).parents("tr").find("td").eq(5).text();
                //也可以获取属性中的值
                if (status=="已借阅")
                    layer.msg("图书已经借出，请等待归还")
                else if(status=="未借阅") {
                    var id = $(this).parents("tr").find("td").eq(0).text();
                    $.ajax({
                        type: 'POST',
                        url: "/book/insertBorrow",
                        data: {
                            id: id
                        },
                        success: function (data) {
                            $('#content').load(location.href + " #content");
                            //count从Servlet中得到
                            insertresult = data;
                            if (data > 0) {
                                location.reload();
                                layer.msg("借阅成功")



                            } else {
                                layer.msg("借阅时出错")
                            }
                        }
                    });
                }

                // console.log($(this).attr("index"))


            })



            $(document).on('click', '#collection', function () {

                var that=this;
                var id = $(this).parents("tr").find("td").eq(0).text();


                $.ajax({
                    type: 'POST',
                    url: "/book/insertCollection",
                    data: {
                        id: id
                    },
                    success: function (data) {
                        $('#content').load(location.href + " #content");
                        //count从Servlet中得到

                        insertresult = data;
                        if (data > 0) {
                            $(that).text(data)
                            layer.msg("收藏成功")

                        } else {
                            layer.msg("您已经收藏过了")
                        }
                    }
                });
            })


            function flush() {
                var frames = parent.document.getElementsByTagName("iframe");
                for (let i = 0; i < frames.length; i++) {
                    console.log(frames[i])
                    if (frames[i].getAttribute("id") == '1') {
                        console.log("执行刷新")
                        var src = frames[i].getAttribute("src");
                        frames[i].setAttribute("src", src + "?" + Math.random())
                    }
                }

                for (let i = 0; i < frames.length; i++) {
                    console.log(frames[i])
                    if (frames[i].getAttribute("id") == '3') {
                        console.log("执行刷新")
                        var src = frames[i].getAttribute("src");
                        frames[i].setAttribute("src", src + "?" + Math.random())
                    }
                }

                for (let i = 0; i < frames.length; i++) {
                    console.log(frames[i])
                    if (frames[i].getAttribute("id") == '2') {
                        console.log("执行刷新")
                        var src = frames[i].getAttribute("src");
                        frames[i].setAttribute("src", src + "?" + Math.random())
                    }
                }
            }


            $('#search').click(function () {
                var keyword = $('#keyword').val();
                alert(keyword)
            });

            $(document).ready(function () {
                //进入页面先加载数据
                getContent(1, limit);
                //得到数量count后，渲染表格
                laypage.render({
                    elem: 'page',
                    count: count,
                    curr: page,
                    limits: [5, 10, 15, 20],
                    limit: limit,
                    layout: ['count', 'prev', 'page', 'next', 'limit'],
                    jump: function (obj, first) {
                        if (!first) {
                            getContent(obj.curr, obj.limit);
                            //更新当前页码和当前每页显示条数
                            page = obj.curr;
                            limit = obj.limit;
                        }
                    }
                });
            });

            function getContent(page, size) {
                var id= $(this).parents("tr").find("td").eq(0).text();
                $.ajax({

                    type: 'POST',
                    url: "/Message/ShowMessage",
                    async: false, //开启同步请求，为了保证先得到count再渲染表格
                    data: JSON.stringify({
                        pageNum: page,
                        pageSize: size,
                        id:id
                    }),
                    contentType: "application/json;charset=utf-8",
                    success: function (data) {
                        $('#content').load(location.href + " #content");
                        //count从Servlet中得到
                        count = data;
                    }
                });
            }
        }
    );
</script>
</body>
</html>